import React, { useState } from 'react';
import { Layout, Button } from 'tdesign-react';
import BlogList from '../components/BlogList';

const { Content } = Layout;

const HomePage = ({ posts, onEdit, onDelete }) => {
  const [sortOrder, setSortOrder] = useState('newest');
  
  const sortedPosts = [...posts].sort((a, b) => {
    if (sortOrder === 'newest') {
      return new Date(b.date).getTime() - new Date(a.date).getTime();
    } else {
      return new Date(a.date).getTime() - new Date(b.date).getTime();
    }
  });

  return (
    <Content style={{ 
      padding: '40px 24px',
      maxWidth: '1200px',
      margin: '0 auto',
      width: '100%'
    }}>
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        marginBottom: '30px',
        flexWrap: 'wrap',
        gap: '16px'
      }}>
        <div>
          <h2 style={{
            fontSize: window.innerWidth < 768 ? '1.5rem' : '2rem',
            fontWeight: '800',
            margin: 0,
            color: '#1e293b'
          }}>
            最新文章
          </h2>
          <p style={{
            fontSize: '1rem',
            color: '#64748b',
            margin: '8px 0 0 0'
          }}>
            发现我的最新博客文章和想法
          </p>
        </div>
        <div>
          <Button 
            variant="outline" 
            theme="primary"
            style={{ 
              padding: '10px 20px',
              fontSize: '1rem',
              fontWeight: '500',
              borderRadius: '8px',
              border: '1px solid #cbd5e1',
              transition: 'all 0.3s ease'
            }}
            onClick={() => setSortOrder(sortOrder === 'newest' ? 'oldest' : 'newest')}
          >
            按{sortOrder === 'newest' ? '最早' : '最新'}排序
          </Button>
        </div>
      </div>
      <BlogList posts={sortedPosts} onEdit={onEdit} onDelete={onDelete} />
    </Content>
  );
};

export default HomePage;